<pro-header style="position:relative;">
    <ng-template #tab >
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp;{{appName}}</span>
        <nz-tabset style="position:relative;left: 83%;"  [nzSize]="'default'" [nzSelectedIndex]="0">
            <nz-tab  *ngFor="let tab of tabs" (nzSelect)="getRouter(tab.router)">
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>

<div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>应用详情</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-home" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>应用名称：</label>
                        <div>{{appItem.appName}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-code" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >应用代码：</label>
                        <div >{{appItem.appCode}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="fa fa-window-restore" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >应用类型：</label>
                        <div >{{appItem.appType}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-bars"  nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>是否开通：</label>
                        <div>{{appItem.isopen}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-info" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >ip地址：</label>
                        <div >{{ appItem.ipAddr}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-laptop" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>端口号：</label>
                        <div>{{appItem.ipPort}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-link" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>访问地址：</label>
                        <div>{{appItem.url}}</div>
                    </div>
                </div>

                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-exception" nz-col [nzSpan]="1"></i>

                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>应用描述：</label>
                        <div nz-col [nzSpan]="20">{{appItem.appDesc}}</div>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card   [nzBordered]="false" >
            <router-outlet></router-outlet>
        </nz-card>
    </div>
</div>



<!-- 重新写 合并逻辑-->
<!--

<pro-header style="position:relative;">
    <ng-template #tab >
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp;{{appName}}</span>
        <nz-tabset style="position:relative;left: 83%;"  [nzSize]="'default'" [nzSelectedIndex]="0">
            <nz-tab  *ngFor="let tab of tabs" (nzSelect)="getRouter(tab.id)">
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>


<div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>应用详情</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-home" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>应用名称：</label>
                        <div>{{appItem.appName}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-code" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >应用代码：</label>
                        <div >{{appItem.appCode}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="fa fa-window-restore" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >应用类型：</label>
                        <div >{{appItem.appType}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-bars"  nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>是否开通：</label>
                        <div>{{appItem.isopen}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-info" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >ip地址：</label>
                        <div >{{ appItem.ipAddr}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-laptop" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>端口号：</label>
                        <div>{{appItem.ipPort}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-link" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>访问地址：</label>
                        <div>{{appItem.url}}</div>
                    </div>
                </div>

                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-exception" nz-col [nzSpan]="1"></i>

                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>应用描述：</label>
                        <div nz-col [nzSpan]="20">{{appItem.appDesc}}</div>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card   [nzBordered]="false" >
            &lt;!&ndash;功能连接&ndash;&gt;
            <div *ngIf="activeLike === 'func'">
                <nz-card  [nzBordered]="false">
                    <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
                        <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                            <div nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>功能名称</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-input [(ngModel)]="funcItem.funcName" name="funcName" [nzSize]="'large'" [nzPlaceHolder]="'功能名称'" nzId="funcName"></nz-input>
                                    </div>
                                </div>
                            </div>
                            <div nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>功能代码</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-input [(ngModel)]="funcItem.funcCode" name="funcCode" [nzSize]="'large'" [nzPlaceHolder]="'功能代码'" nzId="funcCode"></nz-input>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>是否启用</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-select style="width:100%" [(ngModel)]="funcItem.isopen" nzAllowClear name="isopen" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="isopen">
                                            <nz-option  *ngFor="let i of isOpen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>是否验证权限</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-select style="width:100%" [(ngModel)]="funcItem.ischeck" nzAllowClear  name="isopen" [nzSize]="'large'" [nzPlaceHolder]="'是否验证权限'" nzId="ischeck">
                                            <nz-option  *ngFor="let i of isCheck;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                            </div>
                            <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                                &lt;!&ndash;<button  *ngIf="codes.indexOf('query') > 0" nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>&ndash;&gt;
                                <button   nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                                <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                                <a (click)="expandForm=!expandForm">
                                    {{expandForm ? '收起' : '展开'}}
                                    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                    <app-list #child
                              [initDate]="data"
                              [selectedRows]="selectedRows"
                              (addCreat)="addHandler($event)"
                              (buttonData)="buttonDataHandler($event)"
                              (pageNumber)="monitorHandler($event)"
                              (deleatData)="deleatData($event)"
                              [configTitle]="configTitle"
                              [pageindex]='funcItem.pi'
                              (isActive)="isActive($event)"
                              (deleteBatch)="funcbatchDel($event)"
                              (buttonEvent)="buttonEvent($event)"
                              (selectedRow)="selectedRow($event)"
                              [headerDate]="headerData"
                              [buttons]="buttons"
                              [loading]="loading"
                              [moreData]="moreData"
                              [total]="total"></app-list>
                </nz-card>
            </div>
            <div *ngIf="activeLike === 'config'">
                <nz-card  [nzBordered]="false">
                    <form nz-form (ngSubmit)="appsearch()" [nzLayout]="'inline'">
                        <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                            <div  nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>配置类型</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-select style="width:100%" nzAllowClear [(ngModel)]="appConfigitem.configType"  name="configType" [nzSize]="'large'" [nzPlaceHolder]="'配置类型'" nzId="configType">
                                            <nz-option  *ngFor="let i of configType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                            </div>
                            <div nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>配置名</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-input [(ngModel)]="appConfigitem.configName" name="configName" [nzSize]="'large'" [nzPlaceHolder]="'配置名'" nzId="configName"></nz-input>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>配置风格</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-select style="width:100%" [(ngModel)]="appConfigitem.configStyle" nzAllowClear  name="configStyle" [nzSize]="'large'" [nzPlaceHolder]="'配置风格'" nzId="configStyle">
                                            <nz-option  *ngFor="let i of configStyle;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                                <div nz-form-item class="d-flex">
                                    <div nz-form-label><label>是否启用</label></div>
                                    <div nz-form-control class="flex-1">
                                        <nz-select style="width:100%" [(ngModel)]="appConfigitem.enabled" nzAllowClear  name="enabled" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="enabled">
                                            <nz-option  *ngFor="let i of isopen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                            </div>
                            <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                                <button nz-button type="reset" (click)="appreset()" [nzSize]="'large'" class="mx-sm">重置</button>
                                <a (click)="expandForm=!expandForm">
                                    {{expandForm ? '收起' : '展开'}}
                                    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                    <app-list #child
                              [initDate]="appdata"
                              (addCreat)="addappHandler($event)"
                              [selectedRows]="selectedappRows"
                              (pageNumber)="appmonitorHandler($event)"
                              (deleatData)="apdeleatData($event)"
                              [configTitle]="configTitle"
                              [pageindex]='appConfigitem.pi'
                              (deleteBatch)="configbatchDel($event)"
                              (buttonEvent)="appbuttonEvent($event)"
                              [headerDate]="appheaderData"
                              [loading]="loading"
                              [buttons]="appconfigbuttons"
                              [total]="appconfigtotal"></app-list>
                </nz-card>
            </div>
        </nz-card>
    </div>
</div>

&lt;!&ndash; &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 功能连接&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; &ndash;&gt;
&lt;!&ndash;新增功能弹出框&ndash;&gt;
<nz-modal [nzVisible]="modalVisible" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="funTitle"  [nzConfirmLoading]="loading" [nzContent]="modaleContent"
          (nzOnCancel)="functcancel()"     [nzFooter]="modalFooter">
    <ng-template #modaleContent>
        <form novalidate  (ngSubmit)="save(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>功能类型</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="funcAdd.funcType" nzAllowClear #funcType="ngModel" disabled  required name="funcType"  [nzSize]="'large'" [nzPlaceHolder]="'请选择'" nzId="funcType">
                                <nz-option  *ngFor="let i of funcTypes;"  [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">功能编号</label><span [ngClass]="{'fromErrors':funcCode.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcAdd.funcCode" name="funcCode" #funcCode="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'功能编号'" nzId="funcCode"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="funcCode.errors?.required && funcCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择功能编号
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">功能名称</label><span [ngClass]="{'fromErrors':funcName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcAdd.funcName" name="sendValue" #funcName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'功能名称'" nzId="funcName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="funcName.errors?.required && funcName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择功能名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否启用</label></div>
                        <nz-switch [(ngModel)]="isopen" name="switch.isopen" (ngModelChange)="switchchange('isopen', isopen)" >
                            <span checked>是</span>
                            <span unchecked>否</span>
                        </nz-switch>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否验证权限</label></div>
                        <nz-switch [(ngModel)]="ischeck" name="switch.ischeck" (ngModelChange)="switchchange('ischeck', ischeck)">
                            <span checked>是</span>
                            <span unchecked>否</span>
                        </nz-switch>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">服务入口</label><span [ngClass]="{'fromErrors':pathParameter.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcAdd.serviceEntry" name="pathParameter"
                                      #pathParameter="ngModel"
                                      required [nzSize]="'large'" [nzPlaceHolder]="'请填写服务端API地址'"
                                      nzId="funcCode"
                                      (nzBlur)="funcCodeexit(funcAdd.serviceEntry)"></nz-input>
                            <nz-alert *ngIf='isSlash' nzBanner nzMessage="已存在相同的服务入口，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="pathParameter.errors?.required && pathParameter.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择路径参数
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>UI入口</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcAdd.uiEntry" name="uiEntry" [nzSize]="'large'" [nzPlaceHolder]="'请填写页面入口地址'" nzId="uiEntry"></nz-input>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">功能描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcAdd.funcDesc"  nzAutosize=true nzType="textarea" name="funcDesc" [nzSize]="'large'" [nzPlaceHolder]="'功能描述'" nzId="sqlFilter"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="functcancel()">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>

&lt;!&ndash; 查询属性列表 &ndash;&gt;
<nz-modal [nzVisible]="activeModal" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="attrlistTitle"  [nzConfirmLoading]="loading" [nzContent]="modalActive"
          (nzOnCancel)="activeModel()" (nzOnOk)="activeModal=false">
    <ng-template #modalActive>
        &lt;!&ndash;记得改行为列表的方法，这里改了几个比要的，如果以后有需求，查看方法是否修改了&ndash;&gt;
        <app-list  [initDate]="acfundata"
                   (addCreat)="addActives($event)"
                   [selectedRows]="selectedRows"
                   (buttonData)="buttonDataHandler($event)"
                   (pageNumber)="activeHandler($event)"
                   (deleatData)="deleatActiveData($event)"
                   (deleteBatch)="attrbatchDel($event)"
                   [configTitle]="configTitle"
                   [loading]="loading"
                   (isActive)="isActive($event)"
                   (buttonEvent)="activeButton($event)"
                   [pageindex]='attrindex'
                   (selectedRow)="selectedRow($event)"
                   [headerDate]="activeData"
                   [moreData]="ActriceData"
                   [pageindex]='activeItem.pi'
                   [buttons]="activebuttons"
                   [total]="total"></app-list>
    </ng-template>
</nz-modal>
&lt;!&ndash; 添加属性弹框 &ndash;&gt;
<nz-modal [nzVisible]="activeAddModal" [nzMaskClosable]="false"  [nzWidth]="1024"  [nzTitle]="activeTitle"  [nzConfirmLoading]="loading" [nzContent]="addActive"
          [nzFooter]="modalFooter"   (nzOnCancel)="acTiveCancel()" >
    <ng-template #addActive>
        <form novalidate  (ngSubmit)="activeSave(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>属性类型</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="activeItem.attrType" nzAllowClear disabled  name="attrType" [nzSize]="'large'" [nzPlaceHolder]="'属性类型'" nzId="attrType">
                                <nz-option  *ngFor="let i of funcTypes;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">属性名称</label><span [ngClass]="{'fromErrors':attrKey.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="activeItem.attrKey" name="attrKey" #attrKey="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'属性名称'" nzId="attrKey"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="attrKey.errors?.required && attrKey.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择属性名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">属性值</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="activeItem.attrValue" name="attrValue" [nzSize]="'large'" [nzPlaceHolder]="'属性值'" nzId="attrValue"></nz-input>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">属性备注</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="activeItem.memo"  nzAutosize=true nzType="textarea" name="memo" [nzSize]="'large'" [nzPlaceHolder]="'属性备注'" nzId="memo"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="acTiveCancel()">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
</nz-modal>
&lt;!&ndash; 查询行为列表 &ndash;&gt;
<nz-modal [nzVisible]="queryactiveModal"  [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="activelistTitle"  [nzConfirmLoading]="loading" [nzContent]="modalsActive"
          (nzOnCancel)="queryactiveModal=false" (nzOnOk)="queryactiveModal=false">
    <ng-template #modalsActive>
        &lt;!&ndash;记得改行为列表的方法，这里改了几个比要的，如果以后有需求，查看方法是否修改了&ndash;&gt;
        <app-list
            [initDate]="acfunActivedata"
            (addCreat)="addActivesHandler($event)"
            (buttonData)="buttonDataHandler($event)"
            (pageNumber)="addActiveHandler($event)"
            [selectedRows]="selectedRows"
            [configTitle]="activesTitle"
            [pageindex]='bahIndex'
            (isActive)="isActive($event)"
            (deleteBatch)="activebatchDel($event)"
            (buttonEvent)="activeButonEvent($event)"
            (selectedRow)="selectedRow($event)"
            [headerDate]="ActiveheaderData"
            [buttons]="addActiveButtons"
            [loading]="loading"
            [moreData]="moreData"
            [total]="total">
        </app-list>
    </ng-template>
</nz-modal>

&lt;!&ndash;新增行为弹出框&ndash;&gt;
<nz-modal [nzVisible]="modalActiveVisible"  [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="funTitle"  [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalActiveVisible=false" [nzFooter]="modalFooter">
    <ng-template #modalContent>
        <form novalidate  (ngSubmit)="modalActiveVisiblesave(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>功能类型</label><span [ngClass]="{'fromErrors':funcType.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="funcActiveItem.funcType" nzAllowClear #funcType="ngModel" disabled  [nzDisabled]="isActiveOpen"  required name="funcType"  [nzSize]="'large'" [nzPlaceHolder]="'请选择'" nzId="funcType">
                                <nz-option  *ngFor="let i of funcTypes;"  [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="funcType.errors?.required && funcType.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择功能类型
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">行为编号</label><span [ngClass]="{'fromErrors':funcCode.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcActiveItem.funcCode" name="funcCode" #funcCode="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'行为编号'" nzId="funcCode"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="funcCode.errors?.required && funcCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择行为编号
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">行为名称</label><span [ngClass]="{'fromErrors':funcName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcActiveItem.funcName" name="sendValue" #funcName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'行为名称'" nzId="funcName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="funcName.errors?.required && funcName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择行为名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否启用</label><span [ngClass]="{'fromErrors':isopen.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="funcActiveItem.isopen"  nzAllowClear  #isopen="ngModel"  required name="isopen"  [nzSize]="'large'" [nzPlaceHolder]="'请选择'" nzId="isopen">
                                <nz-option  *ngFor="let i of isOpen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="isopen.errors?.required && isopen.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择是否启用
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否验证</label><span [ngClass]="{'fromErrors':ischeck.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="funcActiveItem.ischeck"  nzAllowClear  #ischeck="ngModel"  required name="ischeck"  [nzSize]="'large'" [nzPlaceHolder]="'是否验证权限'" nzId="ischeck">
                                <nz-option  *ngFor="let i of isCheck;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="ischeck.errors?.required && ischeck.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择是否验证权限
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">服务入口</label><span [ngClass]="{'fromErrors':pathParameter.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcActiveItem.serviceEntry" name="pathParameter"
                                      #pathParameter="ngModel"
                                      required [nzSize]="'large'" [nzPlaceHolder]="'请填写服务端API地址'"
                                      nzId="funcCode"
                                      (nzBlur)="funcCodeexit(funcActiveItem.serviceEntry)"></nz-input>
                            <nz-alert *ngIf='isSlash' nzBanner nzMessage="已存在相同的服务入口，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="pathParameter.errors?.required && pathParameter.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择路径参数
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>UI入口</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcActiveItem.uiEntry" name="uiEntry" [nzSize]="'large'" [nzPlaceHolder]="'请填写页面入口地址'" nzId="uiEntry"></nz-input>
                        </div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">显示顺序</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcActiveItem.displayOrder" name="displayOrder" [nzSize]="'large'" [nzPlaceHolder]="'显示顺序'" nzId="displayOrder"></nz-input>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">行为描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="funcActiveItem.funcDesc"  nzAutosize=true nzType="textarea" name="funcDesc" [nzSize]="'large'" [nzPlaceHolder]="'行为描述'" nzId="sqlFilter"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="ActiveCancel()">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>

</nz-modal>



&lt;!&ndash;-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;个性化配置页面-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;
&lt;!&ndash;新增个性化配置弹出框&ndash;&gt;
<nz-modal [nzVisible]="appConfigVisible" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="configAppTitle"  [nzConfirmLoading]="loading" [nzContent]="modaleappContent"
          [nzFooter]="modalFooter" (nzOnCancel)="appConfigVisible = false">
    <ng-template #modaleappContent>
        <form novalidate  (ngSubmit)="appsave(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>配置类型</label><span [ngClass]="{'fromErrors':config.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.configType" nzAllowClear #config="ngModel"  required name="configType"  [nzSize]="'large'" [nzPlaceHolder]="'配置类型'" nzId="configType">
                                <nz-option  *ngFor="let i of configType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="config.errors?.required && config.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择配置类型
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">配置名</label><span [ngClass]="{'fromErrors':names.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appConfigAdd.configName" name="configName" #names="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'配置名'" nzId="configName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="names.errors?.required && names.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择配置名
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="isopen">配置值字典</label><span [ngClass]="{'fromErrors':configdict.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%"
                                       [(ngModel)]="appConfigAdd.configDict"
                                       nzShowSearch #configdict="ngModel" nzAllowClear
                                       (ngModelChange)="checkSelect(appConfigAdd.configDict)"
                                       required name="configDict" [nzSize]="'large'"
                                       [nzPlaceHolder]="'配置值字典'" nzId="configDict">
                                <nz-option  *ngFor="let i of configDict;" [nzLabel]="i.dictKey + i.dictName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="configdict.errors?.required && configdict.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择配置值字典
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="appConfigAdd.configDict">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>默认配置值</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.configValue" nzAllowClear  name="configValue" nzShowSearch
                                       nzAllowClear
                                       [nzSize]="'large'" required  [nzPlaceHolder]="'默认配置值'" nzId="configValue">
                                <nz-option *ngFor="let i of configValue" [nzLabel]="i.itemValue + i.itemName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div  nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否启用</label><span [ngClass]="{'fromErrors':open.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.isopen" nzAllowClear required name="isopen" #open="ngModel" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="isopen">
                                <nz-option  *ngFor="let i of appisopen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="open.errors?.required && open.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择是否启用
                    </div>
                </div>
                <div  nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="sqlFilter">配置描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appConfigAdd.configDesc"   nzAutosize=true nzType="textarea" name="configDesc" [nzSize]="'large'" [nzPlaceHolder]="'配置描述说明'" nzId="configDesc"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="appConfigVisible = false">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="loading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>

-->
